<template>
  <el-container class="full-height">
    <!-- 侧边栏 -->
    <el-aside width="200px" class="sidebar">
      <el-menu :default-active="activeView" class="custom-menu">
        <el-menu-item @click="changeView('users')">
          <el-icon><user /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item @click="changeView('devices')">
          <el-icon><setting /></el-icon>
          <span>设备管理</span>
        </el-menu-item>
        <el-menu-item @click="changeView('tasks')">
          <el-icon><document /></el-icon>
          <span>任务管理</span>
        </el-menu-item>
        <el-menu-item @click="changeView('inspection-record')">
          <el-icon><list /></el-icon>
          <span>巡检记录</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-main class="content">
      <transition name="fade" mode="out-in">
        <component :is="currentView"></component>
      </transition>
    </el-main>
  </el-container>
</template>

<script>
import { defineAsyncComponent } from 'vue';
import { User, Setting, Document, List } from '@element-plus/icons-vue';
import router from "@/router";

// 动态加载组件
const UserView = defineAsyncComponent(() => import('@/views/UserView.vue'));
const DeviceView = defineAsyncComponent(() => import('@/views/DeviceView.vue'));
const TaskView = defineAsyncComponent(() => import('@/views/TaskView.vue'));
const InspectionRecordView = defineAsyncComponent(() => import('@/views/InspectionRecordView.vue'));

export default {
  name: 'AdminLayout',
  components: {
    User,
    Setting,
    Document,
    List,
    UserView,
    DeviceView,
    TaskView,
    InspectionRecordView
  },
  data() {
    return {
      activeView: 'users', // 默认显示用户管理
      currentView: UserView // 默认显示 UserView 组件
    };
  },
  methods: {
    changeView(viewName) {
      console.log('Current route path before navigation:', this.$route.path);

      // 跳转到新路径
      router.push(`/home/${viewName}`);

      // 根据 viewName 更新 currentView
      switch (viewName) {
        case 'users':
          this.currentView = UserView;
          break;
        case 'devices':
          this.currentView = DeviceView;
          break;
        case 'tasks':
          this.currentView = TaskView;
          break;
        case 'inspection-record':
          this.currentView = InspectionRecordView;
          break;
        default:
          this.currentView = UserView;
      }

      this.activeView = viewName;
      console.log('New route path after navigation:', this.$route.path);
    }
  },
  watch: {
    // 监听路由变化，更新 currentView
    '$route.path'(newPath) {
      const viewName = newPath.split('/').pop();
      switch (viewName) {
        case 'users':
          this.currentView = UserView;
          break;
        case 'devices':
          this.currentView = DeviceView;
          break;
        case 'tasks':
          this.currentView = TaskView;
          break;
        case 'inspection-record':
          this.currentView = InspectionRecordView;
          break;
        default:
          this.currentView = UserView;
      }
    }
  }
};
</script>